<template>
  <div class="order-container">
    <div class="tit">
      退款管理
    </div>
    <div class="m-options clearfix">
      <div class="item">
        <span class="title">退款时间</span>
        <div class="options">
          <div class="m-date">
            <w-datepicker name="refundtime" v-model="beginTime" @input="_changeDate"></w-datepicker>
          </div>
          -
          <div class="m-date">
            <w-datepicker name="refundtime" v-model="endTime" @input="_changeDate"></w-datepicker>
          </div>
        </div>
      </div> 
      <div class="item mar-a">
        <span class="title">退款状态</span>
        <div class="options m-select">
          <w-select :default-se="true" :options="refundTypeList" v-model="status"></w-select>
        </div>
      </div>
      <div class="btn search-btn fr">
        <w-button type="main" @on-click="fetchOrderAll(1)">搜索</w-button>
      </div>
    </div>
    <title-bar :columns="columns"></title-bar>
    <!-- 暂无数据  -->
    <div class="orderItem" v-if="orderFormList.length == 0">
      <div class="bgImg"></div>
    </div>
    <div class="orderItem" v-for="(orderAll, index) in orderFormList" :key="index" v-else>
      <refund-item :status="2" :order-all="orderAll" @on-refresh="fetchOrderAll(1)" ></refund-item>
    </div>
    <!--分页  -->
    <div class="mt30" v-if="totalPage > 1">
      <w-paging :current="currentPage" :total="totalPage" @on-page="onPage"></w-paging>
    </div>
  </div> 
</template>

<script>
import titleBar from './components/TitleBar.vue'
// import orderItem from './components/OrderItem.vue'
import refundItem from './components/RefundItem'
import { mapGetters } from 'vuex'
import { apiOrderRefundAll } from 'js/api'

export default {
  data() {
    return {
      columns: [
        { 'col': '货品', 'width': '34%' },
        { 'col': '退款金额', 'width': '14%' },
        { 'col': '申请时间', 'width': '16%' },
        { 'col': '服务类型', 'width': '10%' },
        { 'col': '退款状态', 'width': '12%' },
        { 'col': '交易操作', 'width': '14%' }
      ],
      refundTypeList: [
        {
          label: '待处理',
          value: '0'
        },
        {
          label: '进行中',
          value: '1'
        },
        {
          label: '退款成功',
          value: '2'
        },
        {
          label: '已拒绝',
          value: '3'
        }
      ],
      orderFormList: {}, // 订单列表信息
      beginTime: '',
      endTime: '',
      status: '',
      currentPage: 1, // 当前页
      totalPage: 0 // 总页数
    }
  },
  components: {
    titleBar,
    refundItem
  },
  computed: {
    ...mapGetters(['token'])
  },
  created() {
    this.fetchOrderAll(1)
  },
  methods: {
    _changeDate(date) {
      console.log(date)
    },
    /**
     * 获取全部退款订单
     */
    fetchOrderAll(currentPage) {
      if (this.beginTime == '--') {
        this.beginTime = ''
      }
      if (this.endTime == '--') {
        this.endTime = ''
      }
      apiOrderRefundAll(this.token, currentPage, this.status, this.beginTime, this.endTime).then(data => { // 退款中订单列表
        this.orderFormList = data.orderFormList
        this.totalPage = data.totalPageCount
      })
    },
    /**
     * 分页
     */
    onPage(index) {
      this.currentPage = index
      this.fetchOrderAll(this.currentPage)
    }
  }
}
</script>

<style lang="scss">
.m-options {
  .form-control, textarea {
    height: 28px;
    line-height: 28px;
  }
  .datepicker-container .ico-calendar {
    top: 6px;
  }
  .btn {
    width: 140px;
    height: 28px;
    border-radius:4px;
  }
}
</style>

<style lang="scss" scoped>
  @import '../../scss/_var.scss';
  .order-container {
    // margin: 30px 0 0 0;
    .tit{
      height: 57px;
      width: 100%;
      background-color: #fff;
      line-height: 57px;
      padding-left: 20px;
      font-size: 14px;
      color: $color-dark;
      margin-bottom: 1px;
    }
    .bgImg { // 空空如也
      background-image: url(../../assets/nullIcon/icon_null.png);
      margin: 50px auto auto;
      width: 310px;
      height: 270px;
      background-repeat: no-repeat;
      text-align: center;
      background-size: contain;
      background-position: 50% 50%;
    }
  } 
  .mt30 {
    margin-top: 30px;
  }
  .mar-a {
    margin: 0 auto 0 40px;
  }
  .m-options {
    padding: 12px 20px;
    background-color: #ffffff;
    margin-bottom: 10px;
    .item {
      display: inline-block;
      .options {
        margin-left: 10px;
        display: inline-block;
        .m-date {
          display: inline-block;
          width: 140px;
        }
      }
      .m-select {
        width: 140px;
      }
    }
  }
</style> 